﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>拓扑文件库</title>
		<link rel="stylesheet" href="../css/css.css">
		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		<link type="text/css" rel="Stylesheet" href="../css/tflibrarystyle.css" />
		<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="../js/messagecenter.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript" src="../js/initPage.js"></script>
		<style type="text/css">
		.app_text{
		  color:#04A0E9;
		  cursor:pointer;
		  margin-left:20px;
		}
		.app_text1{
			color:#04A0E9;
		  	cursor:pointer;
		}
		.page-split input{
			display:inline;	
			margin:0px 4px;
		}
		.app_del{
		  cursor:pointer;
		  margin-left:20px;
		}
		.text_color{
			color:#A6A6A6;
			text-align: left;
			text-indent: 14px;
		}
		.text_name{
			text-align:left;
			text-indent: 14px;
		}
		.app_no{
		    background-color: #83BE00;
		    width: 50px;
		    height: 18px;
		    margin-left: 16%;
		    text-indent: 7px;
		    border-radius: 4px;
		    color: #FFFFFF;
	        font-weight: 600;
		 	padding-top: 2px;
		}
		.headerTableDiv3 table tr td{
			border:1px solid #2E6A89;
		}
		#page ul li a{
			margin:0 10px;
		}
	</style>	
	</head>
	<body>
	<div class="left_content">
		<div class="left_block1">
			<div class="left_logo"></div>
			<div class="left_title">品牌数据库编辑器，高效工作，人性化交互</div>
			<div class="left_icons">
				<div class="left_icon1"></div>
				<div class="left_icon2"></div>
				<div class="left_icon3"></div>
			</div>
		</div>
		<div class="left_block2">
			<div class="left_menu">拓扑文件库</div>
			<div class="left_menu">逻辑预案库</div>
			<div class="left_menu">部署库</div>
			<div class="left_menu">监控</div>
			<div class="left_menu">其他</div>
		</div>
		<div class="left_block3">
			<div class="left_title">快捷管理机箱、板卡、芯片，提高工作效率便捷查找功能相关物理和逻辑链接，高效编辑请登陆BDE账号</div>
			<button class="login">登录</button>
		</div>
	</div>
	<div class="right_content" >
			<form id="form1">
				<input type="hidden" id="curIndex" value="0"/>
				<input type="hidden" id="maxPage" value="0"/>
				<input type="hidden" id="curId" name="curId">
					<div class="top-bar">	
						<div style="float:left;">拓扑文件库<br>
							<span  class="text_color"  style="font-size: 13px;">Topological&nbsp;file&nbsp;library</span>
						</div>	
						<div class="top_input" style="float:right; height:36px;margin-top: 12px;">
			      			<button type="button" style="margin-left:20px;border-radius: 5px;" onclick="open_pop()">+添加</button>
			      			<button type="button" class="search">搜索</button>
							<input class="s_input" type="text" id="condition" placeholder="输入关键字搜索"/>
						</div>			
					</div>
					<div class="table-box" >
						<div class="headerTableDiv">
							<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
								<colgroup>
									<col width="10%">
									<col width="15%">
									<col width="8%">
									<col width="12%">
									<col width="12%">
									<col width="16%">
									<col width="27%">
								</colgroup>
								<tr>									
									<td>
										<div class="text_name" style="">编号</div>
										<div class="text_color">Serial&nbsp;number</div>
									</td>
									<td>
										<div class="text_name" style="">名称</div>
										<div class="text_color">The&nbsp;application&nbsp;name</div>
									</td>
									<td>
										<div class="text_name" style="">创建人</div>
										<div class="text_color">founder</div>
									</td>
									<td>
										<div class="text_name" style="">创建时间</div>
										<div class="text_color">Creation&nbsp;time</div>
									</td>
									<td>
										<div class="text_name" style="">修改时间</div>
										<div class="text_color">Modify&nbsp;the&nbsp;time</div>
									</td>
									<td>
										<div class="text_name" style="">描述</div>
										<div class="text_color">Project&nbsp;description</div>
									</td>
									<td>
										<div class="text_name"style="text-indent: 25px;">操作</div>
										<div class="text_color" style="text-indent: 25px;">operation</div>
									</td>
								</tr>	
							</table>
						</div>
						<div class="contentTableDiv">
							<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;width:100%;" >
								<colgroup>
									<col width="10%">
									<col width="15%">
									<col width="8%">
									<col width="12%">
									<col width="12%">
									<col width="16%">
									<col width="27%">
								</colgroup>
							<tbody id="contentTableTbody">
								<tr>
									<td>
										<div  class="app_no">NO.01</div>
									</td >
									<td><div class="app_text1">部署项目1</div></td>
									<td>上大夫</td>
									<td><div class="text_color">2018-02-11 09:00</div></td>
									<td><div class="text_color">2018-02-11 15:23</div></td>
									<td>拓扑案例1+逻辑应用预案1</td>
							  		<td style="text-indent: 0px;">
						  				<button style="margin-left:20px;" onclick="open_pop();">查看预置表</button>
						  				<a class="app_text" >编辑</a>
						  				<a class="app_del">删除</a>
									</td>
							  	</tr >
						  	</tbody>
							</table>
						</div>					 
				</div>				
				<!-- 分页 -->
				<div class="page-split">
					<div id="page"></div>
					<div class="page_count text_color" style="float:right;font-size:13px;">共96条/11页</div>
				</div>
				<!-- 弹窗 -->
				<div class="pop_content" id="showInfo">
				<div class="pop_block">
					<div class="pop_barInfo" >
						<div style="font-size: 18px;color:#424B52;">创建拓扑文件</div>
						<span style="color:#999999;">Create&nbsp;a&nbsp;topology&nbsp;file</span>
					</div>
					<div class="exit_pop" ><img style="cursor:pointer;" alt="" src="../images/bsk/pop_exit.png" onclick="exit_pop();"></div>
					<div class="create_new">
						<div class="f1">
							<div style="color:#5F6C74;">名称&nbsp;:</div>
							<div><input id="name" type="text" placeholder="输入备注信息"></div>
						</div>
						<div class="f2">
							<div style="color:#5F6C74;">备注&nbsp;:</div>
							<div style="width:90%;"><textarea id="note" class="contentTextTextArea" placeholder="输入备注信息"></textarea></div>
						</div>
					</div>
					<div class="bt-btn" style="position: absolute;width:100%;bottom:20px;left:10px;">
				      	<button class="btn-s new-conn">添加连接</button>
				      	<button class="btn-s save" style="margin-left: 15px;">保存</button>
				      </div>
				</div>				 
			</div>
			</form>
		</div>

	</body>
	<script type="text/javascript">
        $(function(){
            $(".search").on("click",function(){
                alert("搜索");
                var curIndex = $("#curIndex").val();
                var name_like = $("#condition").val();
                alert(name_like);
                getList(curIndex,name_like);
            });
        });

        function getList(curIndex,name_like){
            /*var url = "logic_topology/query";
            $("#curIndex").val(curIndex);
            var param = {params:{name_like:name_like},pageable:{page:0,start:0,size:25}};
            $.post(url,param,"JSON").done(function(data){
                if(data){
                    var dataList = data.data;
                       if(dataList&&dataList.length>0){
                        addData(dataList,data.total,25)
                    }
                }
            });*/
        }
	$(function(){
        var curIndex = $("#curIndex").val();
        getList(curIndex);
		var dataArr = [];
	 	for(i=1;i<=20;i++){
			var dataJson = {};
			dataJson.id = i;
			if(i<10){
				dataJson.no = "NO.0"+i;
			}else{
				dataJson.no = "NO."+i;
			}
			dataJson.name = "string"+i;
			dataJson.creator = "string"+i;
			dataJson.cdt = i;
			dataJson.lastModifyTime = "2018-04-10T05:22:20.636Z";
			dataJson.remark = "string"+i;
			dataArr.push(dataJson);
		} 
		addData(dataArr,25,990);

	});
	function view(id){
		alert("预览");
		alert(id);
		/*var url="view";
		$.post(url,{id:id},"JSON").done(function(data){
		    if(data){

			}
		});*/
		window.location.href="#";//跳转到物理拓扑全局预览
	}
	function edit(id){
		alert("编辑");
		alert(id);
		var url="deploy_topology/edit";
		if(id!=null) {
			$.post(url, {id: id}, "JSON").done(function () {

			});
            window.location.href="#";//跳转创建机箱及内部板卡

        }else{
			aler("请选择id");
		}
	}
	function delete2(id){
		alert("删除");
		alert(id);
		var url="deploy_topology/delete"
		if(id!=null) {
			/*$.post(url, {id: id}, "JSON").done(function (data) {
				if (data) {
					window.location.href="../html/tfLibrary.html";//跳转创建机箱及内部板卡
				}
			});*/
            window.location.href="../html/tfLibrary.html";//跳转创建机箱及内部板卡
        }else {
			alert("请选择要删除的id");
		}
	}
	function set(){
		alert("部署库逻辑配置");
		window.location.href="../html/llinkbindors.html";//跳转到  物理视图及逻辑绑定应用
	}
	/*列表*/
	function addData(data,pageMax,total){
        var maxPage = Math.ceil(total/pageMax);
        pageCal(1,maxPage,total);
        $("#maxPage").val(maxPage);
		$("#contentTableTbody").empty();
		var html = '';
		$.each(data,function(k,v){
			html += '<tr>';
			html += '<td><div class="app_no">'+v.no+'</div></td >';
			html += '<td><div class="app_text1" style="cursor:default;">'+v.name+'</div></td>';
			html += '<td>'+v.creator+'</td>';
			html += '<td style="text-indent: 0px;"><div class="text_color">'+v.cdt+'</div></td>';
			html += '<td ><div class="text_color" style="text-indent: 0px;margin-left:15px;">'+v.lastModifyTime+'</div></td>';
			html += '<td ><div>'+v.remark+'</div></td>';
			html += '<td style="text-indent: 0px;">';
			html += '<a class="app_text view" style="margin-left:25px;" onclick="view('+v.id+');">预览</a>';
			html += '<a class="app_text update" style="margin-left:25px;" onclick="edit('+v.id+');">编辑</a>';
			html += '<a class="app_del delete" style="margin-left:25px;" onclick="delete2('+v.id+');">删除</a>';
			html += '<button type="button set" style="margin-left:20px;" onclick="set('+v.id+');">部署逻辑配置</button>';
			html += '</td>';
			html += '</tr>';
		});
		$("#contentTableTbody").append(html);
	} 
	/*添加弹窗*/
	function open_pop(){
		/* var url = '';
		var param = {id:id};
		$.post(url,param,"JSON").done(function(data){

		}); */

		$("#showInfo").show();
		/*新增连接*/
		$(".new-conn").on("click",function(){
			alert("新增连接");
            /*var url = '';
            var param = {id:id};
            $.post(url,param,"JSON").done(function(data){

            });*/
			location.href="#";//跳转到  创建机箱及内部板卡
		});
		/*弹窗新增连接*/
		$(".save").on("click",function(){
			alert("保存");
			var jsonData={name:$("#name").val(),note:$("#note").val()};
			alert(jsonData.name+jsonData.note);
			var url=""
			$.post(url,jsonData,"JSON").done(function(data){
				if(data){
				    alert("添加成功!");
				}else{
				    alert("出现未知错误!");
				}
			});
		});
	}
	function exit_pop(){
		$("#showInfo").hide();
	}
	function tableSum() {
		$(".contentTableDiv").scrollTop(10);// 控制滚动条下移10px
		if ($(".contentTableDiv").scrollTop() > 0) {
			var scrollWidth = getScrollbarWidth();
			$(".contentTableDiv").css("right",(20-scrollWidth)+"px");
		} else {
			$(".contentTableDiv table").css("width", "100%");
		}
		$(".contentTableDiv").scrollTop(0);// 滚动条返回顶部 
	}
	
	$(function(){
		tableSum();
	});

	$(window).resize(function() {
		tableSum();
	});
	
	function getScrollbarWidth() {
	    var odiv = document.createElement('div'),//创建一个div
	        styles = {
	            width: '100px',
	            height: '100px',
	            overflowY: 'scroll'//让他有滚动条
	        }, i, scrollbarWidth;
	    for (i in styles) odiv.style[i] = styles[i];
	    document.body.appendChild(odiv);//把div添加到body中
	    scrollbarWidth = odiv.offsetWidth - odiv.clientWidth;//相减
	    odiv.remove();//移除创建的div
	    return scrollbarWidth;//返回滚动条宽度
	}
    /*分页跳转*/

	function pageCal(curIndex,pageCount,totalCount){
		pageUtil.initPage('page',{
			totalCount:pageCount,//总页数，一般从回调函数中获取。如果没有数据则默认为1页
			curPage:curIndex,//初始化时的默认选中页，默认第一页。如果所填范围溢出或者非数字或者数字字符串，则默认第一页
			showCount:9,//分页栏显示的数量
			pageSizeList:[5,10,15,20,25,30],//自定义分页数，默认[5,10,15,20,50]
			defaultPageSize:1,//默认选中的分页数,默认选中第一个。如果未匹配到数组或者默认数组中，则也为第一个
			isJump:false,//是否包含跳转功能，默认false
			isPageNum:false,//是否显示分页下拉选择，默认false
			isPN:true,//是否显示上一页和下一面，默认true
			isFL:false,//是否显示首页和末页，默认true
			jump:function(curPage,pageSize){//跳转功能回调，传递回来2个参数，当前页和每页大小。如果没有设置分页下拉，则第二个参数永远为0。这里的this被指定为一个空对象，如果回调中需用到this请自行使用bind方法
				console.log(curPage,pageSize);
			},
		});
		$(".page-split .page_count").html('共'+totalCount+'条/'+pageCount+'页');
	}
	</script>
</html>
